<style>
html {
  background: #eeeeee;
}

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.recyclerview-container {
  height: calc(100vh);
}
.testlist {
  display: flex;
  flex-wrap: wrap;
}
</style>

<template>
  <div id="app">
    <RecyclerView 
      v-if="listType === 'Multiple-columns'" 
      ref="RecyclerView"
      :column="3"
      class="recyclerview-container testlist"
      key="multi"
      :fetch="waterFlowFetch" 
      :item="TestItem" 
      :tombstone="TestTombstone"
      :options="waterflowOptions">
    </RecyclerView>
  </div>
</template>

<script>
import Tombstone from './components/Tombstone';
import TestItem from './components/TestItem.vue';
import TestTombstone from './components/TestTombstone.vue';
import { fetch as waterFlowFetch } from './data/waterflow-fetch';

export default {
    name: 'app',
    data() {
        return {
            waterflowOptions: {
                waterflow: true,
                reuseVM: true,
            },
            waterFlowFetch: waterFlowFetch,
            Tombstone,
            listType: 'Multiple-columns',
            TestTombstone,
            TestItem,
        };
    },
    methods: {
        scrollToIndex(index) {
            const lastItemCount = this.lastAttachedItem_ - this.firstAttachedItem_;
            this.fill(index - lastItemCount, index + 1);
        },
    },
};
</script>
